<template>
	<view>
		<!-- <shop-cart ref="shopCart" :selectFoods="selectFoods" :deliveryPrice="deliveryPrice" :minPrice="minPrice"
			:fold="fold" /> -->
		<view>
			<view class="close-able" @click="close">
				<image src="/static/images/close.png" mode="aspectFit" style="width: 32px; height: 32px;"></uv-icon>
			</view>
			<shop-detail :item="item"></shop-detail>
		</view>
		<view class="order-tabbar">
			<view class="order-cell">
				<view class="price">
					<span class="now"><span style="font-size: 16px;">￥</span>{{item.price}}</span>
					<span class="old" v-show="item.oldPrice">￥{{item.oldPrice}}</span>
				</view>
				<view class="count">
					<uv-number-box button-size="36" color="#333333" bgColor="#e7e7e7" iconStyle="color: #333333">
						<template v-slot:minus>
							<view class="minus" @click="decrease(item)">
								<uv-icon name="minus" size="12">
								</uv-icon>
							</view>
						</template>
						<template v-slot:input>
							<text style="width: 50px;text-align: center;" class="input">
								{{count}}
							</text>
						</template>
						<template v-slot:plus>
							<view class="plus" @click="add(item)">
								<uv-icon name="plus" color="#FFFFFF" size="12">
								</uv-icon>
							</view>
						</template>
					</uv-number-box>
				</view>
			</view>
			<view class="order-content">
				<view class="order-button order1" @click="submit">立即购买</view>
				<view class="order-button order2" @click="submit">加入购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ShopCart from './shop-cart.vue';
	import ShopDetail from './shop-detail.vue';
	import popupMixin from '@/mixins/popup'
	export default {
		name: 'shop-cart-sticky',
		// mixins: [popupMixin],
		components: {
			ShopCart,
			ShopDetail
		},
		props: {
			item: Object,
		},
		data() {
			return {
				count: this.item.count || 0,
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			decrease(item) {
				if (this.count > 0) {
					this.count--
				}
			},
			add(item) {
				this.count++
			},
			submit() {
				const updatedItem = { ...this.item, count: this.count };
				console.log('updatedItem',updatedItem)
				this.$emit('submit', updatedItem)
			}
		}
	};
</script>

<style scoped lang="scss">
	.close-able {
		position: absolute;
		z-index: 999;
		border-radius: 100%;
		display: flex;
		top: 28rpx;
		right: 28rpx;
	}

	.order-tabbar {
		width: 100%;
		position: fixed;
		height: 240rpx;
		bottom: calc(var(--window-bottom));
		z-index: 99;
		background-color: #ffffff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		&:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 1rpx;
			z-index: 0;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			background-color: #d6d7d9;
		}

		.order-cell {
			padding: 24rpx 42rpx 32rpx;
			display: flex;
			align-items: center;

			.price {
				line-height: 24px;
				flex: 1;

				.now {
					margin-right: 8px;
					font-size: 22px;
					color: #333333;
					font-weight: 500;
				}

				.old {
					text-decoration: line-through;
					font-size: 12px;
					color: #999;
				}
			}

			.count {
				flex: 1;
				display: flex;
				justify-content: flex-end;
			}
		}

		.order-content {
			padding: 0 32rpx 12rpx;
			display: flex;
			justify-content: flex-end;
			column-gap: 24rpx;




			.order-button {
				flex: 1;
				padding: 16rpx 36rpx;
				width: 50%;
				height: 32px;
				line-height: 32px;
				border-radius: 50rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.order1 {
				border: 1px solid #0b6eef;
				color: #0b6eef;
			}

			.order2 {
				background: #0b6eef;
				color: #ffffff;
			}

			::v-deep .u-button {
				/* 修改宽高 */
				height: 64rpx;
				width: 180rpx;
			}
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>